<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/docs.min.js"></script>
    <style>
        .progress-div {
            background: rgba(0, 0, 0, 0.03);
            width: 1000px;
            height: 140px;
            padding: 60px 20px;
            visibility: hidden;
        }

        .progress {
            margin: 0;
            /*position: fixed;*/
            /*top: 100px;*/
            /*left: 20px;*/
            width: 100%;
        }

    </style>
    <title>进度条</title>
</head>

<body>
<!--1. 按钮-->
<div class="container">

    <button class="btn btn-default" type="button">展示进度条测试数据</button>


    <!--2. 进度条-->
    <div class="progress-div">
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="2" aria-valuemin="0"
                 aria-valuemax="100" style="min-width: 2em; width: 2%;">
                2%
            </div>
        </div>
    </div>


</div>
</body>
<script>

    $(function () {
        $('.btn').on('click', function () {
            $('.progress-bar').css('visibility', 'hidden');
            $('.progress-bar').css('width', 0 + '%');
            $('.progress-bar').text(0 + '%');
            var sitv = setInterval(function () {

                var progress_url = '/show_progress'              // progress_url指请求进度的url，后面会在django中设置

                $.getJSON(progress_url, function (num_progress) {

                    num_progress = parseInt(num_progress)

                    $('.progress-bar').css('visibility', 'visible');
                    $('.progress-bar').css('width', num_progress + '%');
                    $('.progress-bar').text(num_progress + '%');

                    if (num_progress == 100) {
                        clearInterval(sitv);
                    }

                });

            }, 1000);                                 // 每10毫秒查询一次后台进度
            data = {
                type: "data_fusion",
                phone_num: 13020021516
            };
            $.post("http://127.0.0.1:8000/common_request_method/", data, function (info) {
                console.log(info)
            });

            var this_url = '/progress_index/'   // 指当前页面的url

            $.getJSON(this_url, function (res) {
                console.log("处理完成了" + res)
                clearInterval(sitv);                   // 此时请求成功返回结果了，结束对后台进度的查询
            });

        })
    })


</script>
</html>
